<template>
    <swiper :slide="banners" class="index-swiper">
      <swiper-item v-for="(item, index) in banners" :key="index" class="index-swiper-item">
        <a :href="item.url">
          <img :src="'http://150.158.212.186:3001' + item.url" alt="" @load="swiperImgLoad">
        </a>
      </swiper-item>
    </swiper>
</template>

<script>
  import {Swiper, SwiperItem} from "components/common/swiper/index"

  export default {
    name: "ISwiper",
    props: {
      banners: {
        type: Array,
        default () {
          return []
        }
      }
    },
    components: {
      Swiper,
      SwiperItem
    },
    methods: {
      swiperImgLoad () {
        this.$emit('swiperImgLoadReady') //只要有1张轮播图被加载好了,Dom就被撑开了,就可以不用考虑其他的轮播图是否加载完成,而是直接进行相应考虑位置的操作
      }
    }
  }
</script>

<style scoped>
  .index-swiper {
    border-top: 1px solid rgba(255, 17, 0, 1);
    box-shadow: 0 0 1px rgba(86, 86, 86, 1);
  }
  .index-swiper-item { /**通过设置轮播图的单个轮播大小来撑开轮播图，实现轮播图的小的改变*/
    width: 100%;
    height: 500px;
  }
</style>
